<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021-09-22
  Time: 0:26
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<div class="col-md-9">



    <div class="data_list">
        <div class="data_list_title"><span class="glyphicon glyphicon-signal"></span>&nbsp;数据报表 </div>
        <div class="container-fluid">
            <div class="row" style="padding-top: 20px;">
                <div class="col-md-12">
                    <div id="monthChart" style="height: 500px">

                     </div>
                    <h3 align="center">用户地区分布图</h3>
                    <div id="baiduMap" style="height:600px;width: 100%;"></div>

                     </div>

            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="sources/echarts/echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&type=webgl&ak=4y2vBPQFwQ6j67gqN4Cm0AMkGacEr7Iu"></script>
<script type="text/javascript">

    $.ajax({
        type:"get",
        url:"report",
        data:{
            actionName:"month"
        },
        success:function (result){
            console.log(result);
            if(result.code ==1){
            var monthArray =result.result.monthArray;
            var dataArray =result.result.dataArray;
            loadMonthChart(monthArray,dataArray);
            }
        }


    });


 function loadMonthChart(monthArray,dataArray){
    var chartDom = document.getElementById('monthChart');
     var myChart = echarts.init(chartDom);
     var option;

// prettier-ignore
     var dataAxis =monthArray;
// prettier-ignore
     var data =dataArray;
     let yMax = 100;
     let dataShadow = [];

     for (let i = 0; i < data.length; i++) {
         dataShadow.push(yMax);
     }
     option = {
         title: {
             text: '按月统计',
             subtext: '通过月份查询对应的云记数量',
             left:'center'
         },
         xAxis: {
             data: dataAxis,
             axisLabel:{
                 interval:0
     }
         },
         yAxis: {
             axisLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },

         },

         series: [
             {
                 type: 'bar',
               label:{
                 show:true,
                 position:'top',
                 distance:20,
                 verticalAlign:'middle',
                 textStyle:{
                     color:'orange',
                     fontSize:16
                 }


               },
                 itemStyle: {




                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                         { offset: 0, color: '#83bff6' },
                         { offset: 0.5, color: '#188df0' },
                         { offset: 1, color: '#188df0' }
                     ])
                 },
                 emphasis: {
                     itemStyle: {
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                             { offset: 0, color: '#2378f7' },
                             { offset: 0.7, color: '#2378f7' },
                             { offset: 1, color: '#83bff6' }
                         ])
                     }
                 },
                 data: data
             }
         ]
     };

     option && myChart.setOption(option);
 }

 $.ajax({
     type:"get",
     url:"report",
     data:{
         actionName:"location"
     },
     success:function (result){
         console.log(result);
         if(result.code==1){
             loadBaiduMap(result.result)
         }
     }


 });



 function loadBaiduMap(markers){
     var map = new BMapGL.Map("baiduMap");
     var point = new BMapGL.Point(116.404, 39.915);
     map.centerAndZoom(point, 15);
     map.enableScrollWheelZoom(true);
     var zoomCtrl = new BMapGL.ZoomControl();
     map.addControl(zoomCtrl);
     if(markers!=null && markers.length > 0){
         map.centerAndZoom(new BMapGL.Point(markers[0].lon,markers[0].lat),10);
    for(var i = 1; i <markers.length;i++){
        var marker = new BMapGL.Marker(new BMapGL.Point(markers[i].lon,markers[i].lat));
        map.addOverlay(marker);
    }



     }



 }
</script>